﻿@namespace MudBlazor.Docs.Examples

<MudSelect @bind-Value="@country" Label="With render fragements" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Austria")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Flag_of_Austria.svg" height="14" class="mr-1" /> Austria
    </MudSelectItem>
    <MudSelectItem Value="@("Hungary")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Hungary.png" height="14" class="mr-1" /> Hungary
    </MudSelectItem>
    <MudSelectItem Value="@("Sweden")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Flag_of_Sweden_fixed.svg" height="14" class="mr-1" /> Sweden
    </MudSelectItem>
</MudSelect>

<MudSelect @bind-Value="@country" Label="Without render fragements" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Austria")" />
    <MudSelectItem Value="@("Hungary")" />
    <MudSelectItem Value="@("Sweden")" />
</MudSelect>

<MudSelect @bind-Value="@country" Label="Austria not representable" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Germany")">
        <img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg" height="14" class="mr-1" /> Germany
    </MudSelectItem>
    <MudSelectItem Value="@("Hungary")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Hungary.png" height="14" class="mr-1" /> Hungary
    </MudSelectItem>
    <MudSelectItem Value="@("Sweden")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Flag_of_Sweden_fixed.svg" height="14" class="mr-1" /> Sweden
    </MudSelectItem>
</MudSelect>

@code {
    string country="Austria";
}